<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 容器整体样式 */
        .container {
            width: 300px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            font-family: 'Arial', sans-serif;
        }

        /* 标题样式 */
        .container h2 {
            text-align: center;
            font-size: 24px;
            color: #000;
            margin-bottom: 10px;
        }

        /* 输入提示文字 */
        .container p {
            text-align: center;
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }

        /* 输入框样式 */
        .container input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* 提交按钮样式 */
        .container input {
            width: 100%;
            padding: 10px;
            background-color: orange;
            color: white;
            border: none;
            border-radius: 4px;
            margin-top: 15px;
            cursor: pointer;
            font-size: 16px;
        }

        .container input:hover {
            background-color: darkorange;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>留言墙</h2>
        <p>输入后点击提交，会将信息显示在下方</p>
        <div class="from">
            <span>谁: </span>
            <input type="text">
        </div>
        <div class="to">
            <span>对谁: </span>
            <input type="text">
        </div>
        <div class="message">
            <span>说什么: </span>
            <input type="text">
        </div>
        <input type="button" value="提交" onclick="add()">
    </div>

    <script>
        // 将输入框内的信息提取并拼接为留言
        function add() {
            let inputs = document.querySelectorAll('input');
            // 如果输入框内的值为空，不处理
            let from = inputs[0].value;
            let to = inputs[1].value;
            let message = inputs[2].value;
            if (from == '' || to == '' || message == '') {
                alert('请输入要留言的完整信息');
                return;
            }
            // 创建节点、拼接留言
            let newP = document.createElement('p');
            newP.innerText = from + " 对 " + to + " 说: " + message;
            let div = document.querySelector('.container');
            div.appendChild(newP);
            alert(from + ' 留言成功!')
            // 清空留言板中的信息
            inputs[0].value = '';
            inputs[1].value = '';
            inputs[2].value = '';
        }
    </script>
</body>

</html>